<!DOCTYPE html>
<html>
    <head>
        <!-- 当前文档的字符集编码为utf-8 -->
        <meta charset="utf-8">
        <meta name = "author" content="wyrQF">
        <meta name="keywords" content="CGI开发 H5模版 千锋教育 西安物联网">
        <title>表单数据验证</title>
        <link rel="stylesheet" href="/css/my.css">
        <style>
           
        </style>
    </head>
    <body>
      <h3>用户登录</h3>
      <form action="" onsubmit="return validform(this)">
        <div>
            <label for="">账号</label>
            <input id="uname" type="text" name="uname">
        </div>
        <div>
            <label for="">密码</label>
            <input id="upwd" type="password" name="upwd">
        </div>
        <div>
            <button>登录</button>
        </div>
      </form>
      <script>
        let log = console.log;
        function validform(_form){
            // 获取控制台打印两个input输入的内容
            log(_form.uname.value,_form.upwd.value);

            // 验证任务： 
            // 1.用户名不能为空 字符不低于6个
            // 2. 口令不能少于8位
            // 如果验证成功 返回true 提交表单    反之 返回false
            if(!/[a-zA-Z]\w{5,}/.test(_form.uname.value)){
                alert("用户名至少6位，以英文开头的字符！");
                return false;
            }
            if(!/[A-Z]+[a-z]+\d{6,}/.test(_form.upwd.value)){
                alert("密码要包含大写字母小写字母和数字，不能小于8位！");
                return false;// false 表示不提交表单
            }
            return true; 
        }
      </script>
    </body>
</html>
